<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记账本列表</title>
    <link th:replace="template/sys_header :: header"/>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <div class="layui-col-sm5 layui-row-label" style="text-align: left;">
                                账目类型：
                            </div>
                            <div class="layui-col-sm7">
                                <select name="typeSelect" id="typeSelect" lay-search>
                                    <option value="">所有</option>
                                    <option value="0">支出</option>
                                    <option value="1">收入</option>
                                    <option value="2">笔记</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input"  autocomplete="off" placeholder="开始日期" name="startTime" id="startTime">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input"  autocomplete="off" placeholder="截止日期" name="endTime" id="endTime">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <div class="layui-col-sm5 layui-row-label">
                                入账类别：
                            </div>
                            <div class="layui-col-sm7">
                                <select name="dictSelect" id="dictSelect" lay-search>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="iconfont">&#xe69d; </i>批量删除</button>
                    <button class="layui-btn" onclick="add()"><i class="layui-icon"></i>添加</button>
                    <a class="layui-btn" href="/bus/cashbook/export"><i class="iconfont">&#xe73f; </i>导出</a>
                    <span style="float: right; margin-right: 10px;font-size: 16px;">总计(当日)：<i class="iconfont">&#xe6fe;</i><span th:text="${amounts.zhichu}">0</span> &nbsp;&nbsp; <i class="iconfont">&#xe6b9;</i><span th:text="${amounts.shouru}">0</span> <span style="cursor: pointer;" onclick="xadmin.open('记账统计','/bus/cashbook/statistics',800,500)">查看</span></span>
                </div>
                <div class="layui-card-body">
                    <table class="layui-table layui-form" id="cashbookTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="operateTpl">
    <a class="layui-btn layui-btn-primary layui-btn-xs" title="查看" onclick="edit('{{d.cashId}}')" href="javascript:;">
        <i class="layui-icon">&#xe63c;</i>查看 &nbsp;
    </a>
    <a class="layui-btn layui-btn-xs" title="编辑" onclick="edit('{{d.cashId}}')" href="javascript:;">
        <i class="layui-icon">&#xe642;</i>编辑&nbsp;
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" title="删除" onclick="del(this,'{{d.cashId}}')"
       href="javascript:;">
        <i class="layui-icon">&#xe640;</i>删除&nbsp;
    </a>
</script>
<script type="text/javascript" th:replace="template/sys_header :: footer"></script>
<script type="text/javascript" th:inline="javascript">
    var table = layui.table, $ = layui.jquery , form = layui.form , laydate = layui.laydate;
    var tableIns , userId = [[${userId}]];
    $(function () {
        //执行一个laydate实例
        laydate.render({
            elem: '#startTime' //指定元素
        });

        laydate.render({
            elem: '#endTime' //指定元素
        });

        //加载入账类别数据字典到select
        getDictByPId("649036610398617600" , "dictSelect");

        //加载列表 - 默认加载第一个节点数据
        initTable();
    });
    function initTable() {
        var cols = [{
            type: 'checkbox', minWidth: 50 , style : "min-width: 50px;"
        }, {
            field: 'cashType', title: '账目类型', width: 100, align: 'center', templet: function (d) {
                //0:支出，1:收入，2:笔记
                if(d.cashType == "0"){
                    return "支出";
                }else if(d.cashType == "1"){
                    return "收入";
                }else if(d.cashType == "2"){
                    return "笔记";
                }
            }
        }, {
            field: 'recordTime', title: '入账时间', width: 150, align: 'center', templet: function (d) {
                return new Date(d.recordTime).Format("yyyy-MM-dd");
            }
        }, {
            field: 'cashCategory', title: '入账类别', align: 'center'
        }, {
            field: 'amount', title: '账目金额', align: 'center'
        }, {
            field: 'remark', title: '备注', align: 'center'
        }, {
            field: 'operate', title: '操作', width: 280, templet: '#operateTpl', align: 'center'
        }];
        if(userId != "" && userId == "admin"){
            var userName = { field: 'createUsername', title: '创建人', width: 120 , align: 'center'};
            cols.push(userName);
        }

        tableIns = new DataTable({
            elem: '#cashbookTable',
            url: 'bus/cashbook/pageList', //数据接口
            //height : 'full-120',
            cols: cols
        })

        //console.log(tableIns)
        //监听查询按钮
        form.on('submit(search)', function (data) {
            searchTable();
            return false;
        });
    }

    //查询
    function searchTable() {
        var cashType = $("#typeSelect").val();
        var startTime = getById("startTime").value;
        var endTime = getById("endTime").value;
        var selectDictId = $("#dictSelect").val();

        table.reload(tableIns.getTableId(), {
            where: {
                cashType : cashType ,
                startTime: startTime ,
                endTime : endTime,
                dictId: selectDictId
            }, page: {
                pageIndex: 1 //重新从第 1 页开始
            }
        })
    }

    /*删除*/
    function del(obj, id) {
        layer.confirm('确认要删除吗？', {icon: 3}, function (index) {
            //发异步删除数据
            new AjaxRequest({
                type: "POST",
                url: webroot + "bus/cashbook/delete?cashId=" + id,
                isShowLoader: true,
                success: function (res) {
                    if (res.resultCode == "0000") {
                        //删除列表
                        //$(obj).parents("tr").remove();
                        layer.msg('已删除!', {icon: 1, time: 2000});
                        searchTable();
                    } else {
                        layer.alert(res.resultMessage, {icon: 2})
                    }
                }
            });
        });
    }

    //批量删除
    function delAll() {
        var checkStatus = table.checkStatus(tableIns.getTableId()), data = checkStatus.data;
        if (data.length > 0) {
            layer.confirm('确认要删除吗？', {icon: 3}, function (index) {
                var ids = [];
                for (var i = 0; i < data.length; i++) {
                    ids.push(data[i].cashId)
                }
                var id = ids.join(",").toString();
                new AjaxRequest({
                    type: "POST",
                    url: webroot + "bus/cashbook/deleteBatch?cashIds=" + id,
                    isShowLoader: true,
                    success: function (res) {
                        if (res.resultCode == "0000" && res.resultObj) {
                            layer.alert('删除成功');
                            //找到所有被选中的，进行删除
                            $(".layui-table-body .layui-form-checked").parents('tr').remove();
                        } else {
                            layer.alert(res.resultMessage, {icon: 2})
                        }
                    }
                });
            });
        } else {
            layer.alert("请选择要删除的项", {icon: 2})
        }
    }

    //编辑与新增时把选中的组织机构节点传到弹出层页面
    function edit(cashId) {
        xadmin.open('编辑账目', '/bus/cashbook/edit?cashId=' + cashId, 850, 500)
    }

    function add() {
        xadmin.open('新增账目', '/bus/cashbook/edit', 850, 500)
    }

    //编辑或新增后，调用此方法刷新树与列表
    function refreshlist() {
        //刷新列表
        searchTable();
    }
</script>
</body>
</html>